<template>
	<view class="container">
		<image class="topImage" mode="aspectFit" src="/static/logo加粗版.png"></image>
		<view class="login-from">
			<!--账号-->
			<view class="inputView">
				<image class="nameImage" src="/static/name.png"></image>
				<label class="loginLab">用户名</label>
				<input class="inputText" placeholder="请输入用户名" v-model="username" />
			</view>
			<view class="line"></view>

			<!--密码-->
			<view class="inputView">
				<image class="keyImage" src="/static/key.png"></image>
				<label class="loginLab">密码</label>
				<input class="inputText" type="password" placeholder="请输入密码" v-model="password" />
			</view>
			<view class="line"></view>

			<!--按钮-->
			<view class="loginBtnView">
				<button class="loginBtn" type="primary" @click="login">登录</button>
				<view class="register" @click="goToRegister">没有账号？去注册-></view>
			</view>
			<!-- 其他登陆方式 -->
			<view class="otherText">
				<text>————联系我们：18781796186————</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: ''
			};
		},
		methods: {
			goToRegister() {
				uni.navigateTo({
					url: '/pages/register/register',
				});
			},
			// 登录函数
			login() {
				if (this.username.length === 0 || this.password.length === 0) {
					uni.showToast({
						title: '账号或密码不能为空',
						icon: 'none',
						duration: 2000
					});
					return; // 如果有空，则不执行后续操作
				}
				// 发送请求到后端登录接口
				uni.request({
					url: `http://localhost:8080/user/submit?username=${this.username}&password=${this.password}`, //后端登录API地址
					method: 'GET',
					success: (res) => {
						// 存储数据
						uni.setStorageSync('username', this.username);
						const number = res.data; //后端返回的number状态码
						switch (number) {
							case 1:
								uni.showToast({
									title: '用户不存在，请先注册',
									icon: 'none',
									duration: 2000
								});
								break;
							case 2:
								// 登录成功
								uni.showToast({
									title: '欢迎来到Flowerart',
									icon: 'success',
									duration: 2000
								});
								uni.switchTab({
									url: '/pages/index/index' // 跳转至首页
								});
								break;
							case 3:
								// 用户被禁用
								uni.showToast({
									title: '您已进入黑名单，请先联系管理员',
									icon: 'none',
									duration: 2000
								});
								break;
							default:
								// 登录失败
								uni.showToast({
									title: '用户名或密码错误',
									icon: 'none',
									duration: 2000
								});
								break;
						}
					},
					fail: (err) => {
						console.error(err);
					}
				});
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
		background-image: url(https://flowerart-img.oss-cn-chengdu.aliyuncs.com/%E8%83%8C%E6%99%AF.png);
		background-size: cover;
		/*背景图像覆盖整个容器*/
		background-position: center;
		/*背景图像居中显示*/
		background-repeat: no-repeat;
		/*背景图像不重复*/
	}

	.container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	.topImage {
		margin-top: 120rpx;
		width: 320px;
		height: 80px;
	}
	.login-from {
		margin-top: 20rpx;
		flex: auto;
		height: 100%;
	}

	.inputView {
		margin-top: 30rpx;
		height: 150rpx;
		line-height: 150rpx;
		border-radius: 20rpx;
		background-color: rgba(255, 255, 255, 0);
	}

	/*输入框*/
	.nameImage,
	.keyImage {
		margin-left: 40px;
		width: 45rpx;
		height: 40rpx;
		margin-top: 15rpx;
	}
	.loginLab {
		margin: 15px 0px 20px 15px;
		font-size: 28rpx;
	}

	.inputText {
		display: block;
		float: right;
		text-align: right;
		margin-right: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 28rpx;
		color: #000;
		font-size: 28rpx;
	}

	.line {
		width: 100%;
		height: 1rpx;
		background-color: #cccccc;
		margin-top: 1rpx;
	}

	/*按钮*/
	.loginBtnView {
		width: 100%;
	}

	.loginBtn {
		width: 80%;
		height: 100rpx;
		margin-top: 45px;
		font-size: 32rpx;
		border-radius: 20px;
		text-align: center;
		font-size: 37rpx;
	}

	.otherText {
		text-align: center;
		margin: 80rpx 0 0 0;
		color: #999;
		font-size: 30rpx;
	}

	.login {
		text-align: center;
		width: 600rpx;
		margin: 40rpx auto 0;
	}

	.login image {
		width: 70rpx;
		height: 70rpx;
	}

	.register {
		margin: 20rpx 20rpx 10rpx 190rpx;
		color: #999;
		font-size: 30rpx;
	}

	.weixin {
		zoom: 1;
	}

	.weixin::after {
		clear: both;
		display: block;
		visibility: hidden;
		height: 0;
		content: '\20';
	}

	.wxtext {
		width: 600 rpx;
	}
</style>